<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-09-27 17:39:11
 * @LastEditTime: 2023-10-07 10:33:16
-->
<template>
    <!-- <div  ref="buttonRef" v-click-outside="onClickOutside" >
        <slot></slot>
    </div> -->

    <div class="poTitle">
        <div  @click="handClick">
            <slot></slot>
        </div>
        <div class="popup" v-if="show">
            <slot name="item"></slot>
        </div>
    </div>

    <div class="overlay" v-if="show" @click="handClick"></div>
    <!-- <el-popover  ref="popoverRefss" :virtual-ref="buttonRef" trigger="click" title="" virtual-triggering width="auto" >
        <slot name="item"></slot>
    </el-popover> -->
</template>
  
<script>
export default {
    components: {
    },
    data() {
        return {
            show: false,
        }
    },
    methods: {
        handClick() {
            this.show = !this.show
        }
    }
}

</script>
<style scoped>
.popup {
    position: absolute;
    background: white;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 2;
    font-size: 13px;
    margin-top: 1px;
    top: 45px;
    font-size: 12px;
    width: auto;
    overflow: auto;
    left: -50%;
}

.poTitle {
    position: relative;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}
</style>
  